<template>
    <div class="details-container">
      <!-- banner -->
      <CommonHead></CommonHead>

      <!-- 文章分类 -->
    <div class="essaytype">
        <a href="">电商</a>
        <a href="">企业官网</a>

        <a href="">游戏/娱乐</a>
        <a href="">运营设计</a>
        <a href="">移动端网页</a>
        <a href="">门户网站</a>
        <a href="">个人网站</a>
        <a href="">其他网页</a>
        <a href="">文章</a>
    </div>

      
     
   
  
      <!-- 文章 -->
      <div class="index-case">
        <div class="container">
          <div class="row">
            <div class="col-lg-3 col-sm-6" v-for="item in list" :key="item.id">
              <div class="case-div">
                <div class="case-img pr">
                  <a href="/studydetail">
                    <img
                      :src="item.image ? item.image : require('../assets/img/1.jpg')"
                      alt=""
                      class="w100"
                    />
                  </a>
                
                </div>
                <div class="case-bot">
                  <p class="case-title">
                    <a href="/studydetail">{{ item.title }}</a>
                  </p>
                  <p class="case-bq">
                    <span class="glance-span"> <i class="iconfont icon-liulan"></i> 315 </span>

                    &nbsp;&nbsp;<span class="glance-span"> <i class="iconfont icon-dianzan_kuai"></i> 11 </span>
                    &nbsp;&nbsp;<span class="glance-span"> <i class="iconfont icon-shoucang"></i> 22 </span>
                 
                  
                </p>
                
                  <div class="sculpture-box clearfix pr">
                    <div class="sculpture fl">
                      <a href="" @mouseover="hover = true" @mouseleave="hover = false">
                        <img
                          :src="item.userpic ? item.userpic : require('../assets/img/1.png')"
                          alt=""
                          class="w100"
                        />
                        {{ item.username }}
                      </a>
                      <div class="sculpture-hover pa">
                        <div class="sculpture-top clearfix">
                          <div class="fl sculpture-left">
                            <img
                              :src="item.userpic ? item.userpic : require('../assets/img/1.png')"
                              alt=""
                            />
                            <div>
                              <p class="surname">{{ item.username }}</p>
                              <p class="name-position">网页设计师</p>
                            </div>
                          </div>
                          <div class="fr hire-me overall-btn">
                            <a href="">雇用我</a>
                          </div>
                        </div>
                        <ul class="sculpture-works-ul clearfix">
                          <li>
                            <a href="">
                              <img src="@/assets/img/2.jpg" alt="" />
                            </a>
                          </li>
                          <li>
                            <a href="">
                              <img src="@/assets/img/3.jpg" alt="" />
                            </a>
                          </li>
                          <li>
                            <a href="">
                              <img src="@/assets/img/4.jpg" alt="" />
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="fr collect">
                        <span>
                            4天前
                        
                        </span>
                     
                    
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="foot-top">
          <div class="foot-top-zc">
            <a href="/register"> 注册</a> 或<a href="/sign">登录</a> 您的帐户，获得创意成果，受雇于无数家企业。
          </div>
          <div class="phone-box">
            <a href="/sign" class="phone-a"> 使用手机号 </a>
            或者
            <a href="" class="">
              <svg
                t="1678699421155"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5951"
                width="32"
                height="32"
              >
                <path
                  d="M512 51.2C257.5104 51.2 51.2 257.5104 51.2 512c0 254.4896 206.3104 460.8 460.8 460.8 254.4896 0 460.8-206.3104 460.8-460.8C972.8 257.5104 766.4896 51.2 512 51.2zM512 947.2C272.0256 947.2 76.8 751.9744 76.8 512 76.8 272.0256 272.0256 76.8 512 76.8s435.2 195.2256 435.2 435.2C947.2 751.9744 751.9744 947.2 512 947.2z"
                  p-id="5952"
                  fill="#9E9EA7"
                ></path>
                <path
                  d="M612.1088 421.0176c6.4896 0 12.9152 0.4736 19.2768 1.1904C614.0672 341.5424 527.8208 281.6 429.376 281.6c-110.0544 0-200.2176 75.0208-200.2176 170.2784 0 54.9888 29.9904 100.1472 80.1152 135.168l-20.0192 60.2368 69.9904-35.0976c25.0496 4.9536 45.1328 10.0608 70.1312 10.0608 6.2848 0 12.5184-0.3072 18.688-0.7936-3.9168-13.3888-6.1824-27.4048-6.1824-41.9584C441.8816 492.0064 517.0048 421.0176 612.1088 421.0176zM504.448 366.7328c15.0784 0 25.0624 9.92 25.0624 24.9856 0 15.0016-9.984 25.0624-25.0624 25.0624-15.0016 0-30.0672-10.0608-30.0672-25.0624C474.3936 376.6528 489.4464 366.7328 504.448 366.7328zM364.3264 416.7808c-15.0016 0-30.144-10.0608-30.144-25.0624 0-15.0656 15.1424-24.9856 30.144-24.9856 15.0016 0 24.9984 9.92 24.9984 24.9856C389.3248 406.7328 379.3408 416.7808 364.3264 416.7808z"
                  p-id="5953"
                  fill="#9E9EA7"
                ></path>
                <path
                  d="M624.7808 431.7824c-95.2576 0-170.2912 65.2544-170.2912 145.2928 0 80.192 75.0336 145.2928 170.2912 145.2928 19.9424 0 40.0512-5.0304 60.0704-10.048L739.7632 742.4l-15.0528-50.0352c40.192-30.1568 70.1312-70.1312 70.1312-115.2896C794.8416 497.024 714.7392 431.7824 624.7808 431.7824zM569.5616 552.0256c-9.9712 0-20.032-9.92-20.032-20.032 0-9.9712 10.0608-20.0192 20.032-20.0192 15.1424 0 25.0624 10.048 25.0624 20.0192C594.624 542.1056 584.704 552.0256 569.5616 552.0256zM679.6928 552.0256c-9.8944 0-19.8912-9.92-19.8912-20.032 0-9.9712 9.984-20.0192 19.8912-20.0192 15.0016 0 25.0624 10.048 25.0624 20.0192C704.7552 542.1056 694.6944 552.0256 679.6928 552.0256z"
                  p-id="5954"
                  fill="#9E9EA7"
                ></path>
              </svg>
            </a>
          </div>
        </div>
        <FootCopyright></FootCopyright>
      </div>
    </div>
    <RouterView />
  </template>
  <script>
  import { ref } from 'vue'
  
  const value = ref('')
  // 列表
  
  const demo = [
    {
      id: 1,
      username: 'Stefan ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '【文】一篇文章搞懂如何做好对话框设计',
      image:  new URL(new URL('/src/assets/img/1.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 2,
      username: 'Stefan1 ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '设计师如何在业务中体现个人价值',
      image:  new URL(new URL('/src/assets/img/2.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 3,
      username: 'Stefan2 ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '2022追波设计流行趋势',
      image: new URL(new URL('/src/assets/img/3.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 4,
      username: 'Stefan ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '设计师专属个站，有 Bento 分分钟搞定！',
      image: new URL(new URL('/src/assets/img/4.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 5,
      username: 'Stefan1 ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '设计师专属个站，有 Bento 分分钟搞定！',
      image: new URL(new URL('/src/assets/img/5.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 6,
      username: 'Stefan2 ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '放心，Ai暂时还取代不了这类设计师',
      image: new URL(new URL('/src/assets/img/6.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 7,
      username: 'Stefan ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '【3.8焕新周】活动专题页赏析来了！',
      image: new URL(new URL('/src/assets/img/7.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 8,
      username: 'Stefan1 ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '纺织行业通用高端PSD模板2',
      image: new URL(new URL('/src/assets/img/8.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 9,
      username: 'Stefan2 ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '纺织行业通用高端PSD模板3',
      image:  new URL(new URL('/src/assets/img/9.jpg', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 10,
      username: 'Stefan ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '纺织行业通用高端PSD模板4',
      image: new URL(new URL('/src/assets/img/8.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 11,
      username: 'Stefan1 ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '纺织行业通用高端PSD模板5',
      image: new URL(new URL('/src/assets/img/1.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    },
    {
      id: 12,
      username: 'Stefan2 ',
      userpic: new URL('/src/assets/img/1.png', import.meta.url) .href,
      newstime: '2021-1-1 下午1：00',
      isFollow: false,
      title: '纺织行业通用高端PSD模板6',
      image: new URL(new URL('/src/assets/img/4.webp', import.meta.url) .href, import.meta.url) .href,
      copyright: 'VM012821125851122111'
    }
  ]
  
  // 行业
  const tradeoptions1 = [
    {
      id: 1,
      label: '家居建材',
      value: '家居建材'
    },
    {
      id: 2,
      label: '休闲旅游',
      value: '休闲旅游'
    },
    {
      id: 3,
      label: '娱乐游戏',
      value: '娱乐游戏'
    },
    {
      id: 4,
      label: '卡通绘画',
      value: '卡通绘画'
    },
    {
      id: 5,
      label: '网络数码',
      value: '网络数码'
    }
  ]
  
  const typeoptions1 = [
    {
      value: 'Adobe lllustrator',
      label: 'Adobe lllustrator'
    },
    {
      value: 'Adobe Photoshop',
      label: 'Adobe Photoshop'
    },
    {
      value: 'Adobe XD',
      label: 'Adobe XD'
    },
    {
      value: 'Figma',
      label: 'Figma'
    },
    {
      value: 'Sketch',
      label: 'Sketch'
    },
    {
      value: 'other',
      label: 'other'
    }
  ]
  
  export default {
    data() {
      return {
        colorhover: false,
        showDetail: false,
        hover: false,
        filter: false,
        isActive: true,
        zan: false,
        list: demo,
        tradeoptions: tradeoptions1,
        zanListId: [1, 2],
        tradeovalue: '',
        typeoptions: typeoptions1,
        typevalue: ''
      }
    },
    methods: {
      async onBtnClick() {
        this.showDetail = !this.showDetail // 在点击按钮是，改变showDetail的值
      },
      async colorshow() {
        console.log(this.colorhover)
        this.colorhover = !this.colorhover // 在点击按钮是，改变showDetail的值
      },
  
      async filtershow() {
        this.filter = !this.filter // 在点击按钮是，改变showDetail的值
      }
  
      // async  dianzan(index, id) {
      //   let list = this.zanListId;
  
      //   this.zan=!this.zan;
      //   // if (list.indexOf(id) == -1) {
      //   //   // 没找到
      //   //   // 执行点赞功能
      //   //   this.foodMeishi[index].dianzan += 1;
      //   //   // 加到数组中
      //   //   this.zanListId.push(id);
  
      //   //   this.foodMeishi[index].xin = !this.foodMeishi[index].xin;
      //   // } else {
      //   //   // 取消点赞
      //   //   this.foodMeishi[index].dianzan -= 1;
      //   //   this.foodMeishi[index].xin = !this.foodMeishi[index].xin;
      //   //   this.zan=false;
      //   //   for (var i in this.zanListId) {
      //   //     if (this.zanListId[i] == id) {
      //   //       this.zanListId.splice(i, 1);
      //   //     }
      //   //   }
      //   // }
      // }
    }
  }
  </script>
  
  
  
  
  